<form action="<?php echo url('user/info');?>" method="post"  enctype="multipart/form-data">
  <div class="user-info">
    <div class="pull-left mr2x">
      <img src="<?php echo $user['user_photo'] ? $user['user_photo'] : '/statics/front/images/user/avatar.jpg';?>" width="190" height="190" style="display:block;">
    </div>
    <div class="pull-left font-md user-info-right">
      <p style="font-size:1.25em;"><?php echo isset($user['username']) ? $user['username'] : null; ?></p>
      <?php $inputgender = L('inputgender'); ?>
      <p>
        <em><?php echo L('gendername'); ?>：</em>
        <?php if($user['gender'] == 0){echo $inputgender[0];}elseif($user['gender'] == 1){echo $inputgender[1];}elseif($user['gender'] == 2){echo $inputgender[2];}?>
      </p>
      <p>
        <em><?php echo L('birthday'); ?>：</em>
        <?php if (isset($user) && $user['birthday'] != '') echo $user['birthday'];?>
      </p>
      <p>
        <em><?php echo L('userphone'); ?>：</em>
        <?php echo isset($user['phone']) ? $user['phone'] : null;?>
      </p>
      <p>
        <em><?php echo L('useremail'); ?>：</em>
        <?php echo isset($user['email']) ? $user['email'] : null;?>
      </p>
      <p>
        <span class="mr2x"><em><?php echo L('country'); ?>：</em><?php echo $countryName; ?></span>
        <span class="mr2x"><em><?php echo L('state'); ?>：</em><?php echo isset($user['data']['province']) ? $user['data']['province'] : null; ?></span>
        <span><em><?php echo L('city'); ?>：</em><?php echo isset($user['data']['city']) ? $user['data']['city'] : null; ?></span>
      </p>
      <p>
        <em><?php echo L('address'); ?>：</em>
        <?php echo isset($user['data']['address']) ? $user['data']['address'] : null; ?>
      </p>
    </div>
    <button type="button" class="btn js-edit-user-info"><?php echo L('Modify_the_information'); ?></button>
  </div>
  <ul class="pt2x user-center-fields js-user-info" style="display:none;border-top:1px solid #ccc;">
    <li>
      <em><?php echo L('fristname'); ?>：</em>
      <input type="text" name="first_name" value="<?php echo isset($user['first_name']) ? $user['first_name'] : null; ?>">
    </li>
    <li>
      <em><?php echo L('lastname'); ?>：</em>
      <input type="text" name="last_name" value="<?php echo isset($user['last_name']) ? $user['last_name'] : null; ?>">
    </li>
    <li>
	    <em><?php echo L('gendername'); ?>：</em>
      <span>
        <label><input type="radio" name="gender" value="0"<?php if(!isset($user['gender']) || (isset($user['gender']) && $user['gender']==0)) echo ' checked'; ?>>&nbsp;&nbsp;<?php echo  $inputgender[0]; ?></label>
        <label class="ml1x mr1x"><input type="radio" name="gender" value="1"<?php if(!isset($user['gender']) || (isset($user['gender']) && $user['gender']==1)) echo ' checked'; ?>>&nbsp;&nbsp;<?php echo  $inputgender[1]; ?></label>
        <label><input type="radio" name="gender" value="2"<?php if(!isset($user['gender']) || (isset($user['gender']) && $user['gender']==2)) echo ' checked'; ?> >&nbsp;&nbsp;<?php echo  $inputgender[2]; ?></label>
      </span>
    </li>
    <li>
      <em><?php echo L('birthday'); ?>：</em>
      <input type="text" name="birthday" id="birthday" value="<?php if (isset($user) && $user['birthday'] != '') echo $user['birthday']; ?>">
    </li>
    <li>
	    <em><?php echo L('userphone'); ?>：</em>
      <input type="text" name="phone" value="<?php echo isset($user['phone']) ? $user['phone'] : null; ?>">
    </li>
    <li>
	    <em><?php echo L('useremail'); ?>：</em>
      <input type="text" name="email" value="<?php echo isset($user['email']) ? $user['email'] : null; ?>" disabled>
    </li>
    <li>
      <em><?php echo L('country'); ?>:</em>
      <div class="select-widget">
        <i></i>
        <em><?php echo L('choosecountry'); ?></em>
        <select name="data[country_id]" autocomplete="off" title="<?php echo L('choosecountry'); ?>">
          <option value="0"><?php echo L('select_country');?></option>
          <?php
          if(isset($countryList) && $countryList):
            foreach($countryList as $country):
          ?>
          <option value="<?php echo $country['id']; ?>"<?php if($user['data']['country_id'] == $country['id'])echo ' selected';?>><?php echo $country['name']; ?></option>
          <?php
            endforeach;
          endif;
          ?>
        </select>
      </div>
    </li>
    <li>
      <em><?php echo L('state'); ?>：</em>
      <input type="text" name="data[province]" value="<?php echo isset($user['data']['province']) ? $user['data']['province'] : null; ?>">
    </li>
    <li>
	    <em><?php echo L('city'); ?>：</em>
      <input type="text" name="data[city]" value="<?php echo isset($user['data']['city']) ? $user['data']['city'] : null; ?>">
    </li>
    <li>
      <em><?php echo L('address'); ?>：</em>
      <input type="text" name="data[address]" value="<?php echo isset($user['data']['address']) ? $user['data']['address'] : null; ?>">
    </li>
    <li class="mt1x">
      <input type="submit" name="dosubmit" class="btn btn-middle" value="<?php echo L('saveuser'); ?>">
    </li>
  </ul>
</form>
<script>
$(function () {
  var $userInfo = $('.js-user-info'),
      $userInfoForm = $userInfo.closest('form');

  $('.js-edit-user-info').on('click', function() {
    $userInfo.slideToggle();
  });

  $userInfo.find('select[name="data[country_id]"]').on('change', function () {
    $(this).prev().text($(this).find('option:selected').text());
  }).each(function () {
    $(this).prev().text($(this).find('option:selected').text());
  });

  $userInfoForm.validate({
    submitHandler: function(form) {
      form.submit();
    },
    errorElement: 'p',
    errorPlacement: function(error, element) {
      if (element[0].tagName.toLowerCase() === 'select' && element.parent().hasClass('select-widget')) {
        error.insertAfter(element.parent());
      } else {
        error.insertAfter(element);
      }
    },
    rules: {
      first_name: 'required',
      last_name: 'required',
      phone: 'required',
      'data[country_id]': {
        required: true,
        min: 1
      },
      'data[province]': 'required',
      'data[city]': 'required',
      'data[address]': 'required'
    }
  });
});
</script>